<template>
	<view class="content-container">
		<view v-if="detail && detail.isLink=='N'">
			<view class="title">
				<uni-title type="h1" :title="detail.title" align="center"></uni-title>
			</view>
			<view>
				<uni-row>
					<uni-col :span="2">
						<image class="logo-img" :src="apiurl+detail.logo"></image>
					</uni-col>
					<uni-col :span="8">
						<text class="font-12">{{detail.departName}}</text>
					</uni-col>
					<uni-col :span="7" class="align-right">
						<text class="font-12">
							浏览量：<text class="red">{{detail.totalClick}}</text>
						</text>
					</uni-col>
					<uni-col :span="7" class="align-right">
						<text class="font-12">
							报名费：<text class="red">{{detail.signFee}}元</text>
						</text>
					</uni-col>
				</uni-row>
			</view>
			<view class="font-12" style="margin-top:10px; background-color: #FEF3D1;padding: 5px 5px;">
				<uni-row >
					<uni-col :span="2">
						<uni-icons type="calendar" size="16"></uni-icons>
					</uni-col>
					<uni-col :span="22">
						<uni-dateformat :date="detail.beginTime" format="yyyy年MM月dd日 hh时mm分"></uni-dateformat>
						<text>—</text>
						<uni-dateformat :date="detail.endTime" format="MM月dd日 hh时mm分"></uni-dateformat>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="2">
						<uni-icons custom-prefix="iconfont" type="icon-xueshengbaoming" size="16"></uni-icons>
					</uni-col>
					<uni-col :span="22">
						报名日期：<uni-dateformat :date="detail.signBeginDate" format="yyyy年MM月dd日"/>
						<text>—</text>
						<uni-dateformat :date="detail.signEndDate" format="MM月dd日"/>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="2">
						<uni-icons type="location" size="16"></uni-icons>
					</uni-col>
					<uni-col :span="22">地点：{{detail.location}}</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="2">
						<uni-icons type="phone" size="16"></uni-icons>
					</uni-col>
					<uni-col :span="22">
						咨询电话：<text class="blue" @click="callPhone(detail.phone)">{{detail.phone}}</text>
					</uni-col>
				</uni-row>
			</view>
			<view  v-html="detail.content"></view>
		</view>
		<view v-if="detail && detail.isLink=='Y'">
			<web-view :src="detail.url"></web-view>
		</view>
		<view style="height: 80px;">&nbsp;</view>
		<!-- 底部操作菜单 -->
		<view class="mix-botoom-operation row">
			<view class="btn-group row">
				<view class="btn center">
					
					<button open-type="share" style="width: 100%;background-color: rgba(0,0,0,0.0); font-size: 16px;color: white;">分享</button>
				</view>
				<view class="btn center" @click="navTo('/pages/activity/activityForm?id='+detail.id+'&typeId='+detail.categoryId+'&name='+detail.title)">
					<text>立即报名</text>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apiurl:'',
				id:"",
				detail:null,
				compnay:''
			}
		},
		onLoad:function(option){
			
			
			
			 this.apiurl = getApp().globalData.staticUrl
		     this.id = option.id
		     uni.setNavigationBarTitle({
		         title:option.title
		     })
			 this.$http.get('/temple.activity/templeActivity/api/queryById?id='+this.id, {}).then((res) => {
			 	//this.list = res.data.result.records;
				this.detail = res.data.result
				console.log(this.detail)
				var that = this
				this.$http.get('/sys/sysDepart/api/getDepartName', {
					'orgCode':that.detail.sysOrgCode
				}).then((res) => {
					this.$set(that.detail,'departName',res.data.result.departName)
				})
				this.$http.get('/temple.appearance/templeLogo/api/getOne', {
				}).then((res) => {
					console.log(res)
					this.$set(that.detail,'logo',res.data.result.img)
				})
			 })
			 
			 
		},
		methods: {
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			weixinShare(){
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					title: this.detail.title,
					imageUrl:this.apiurl+this.detail.img,
					miniProgram:{
						path: '/pages/news/detail?id='+this.detail.id+'&title='+this.detail.title,
					},
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			}
		}
	}
</script>

<style scoped lang='scss'>
	.uni-row{
		margin-bottom: 5px;
	}
	/* 底部菜单栏 */
	.mix-botoom-operation {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 90;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx 0 rgba(0, 0, 0, .1);
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.nav-group {
		padding-left: 6rpx;
	
		.nav {
			width: 90rpx;
			height: 80rpx;
			color: #333;
			position: relative;
	
			&.active {
				color: $base-color;
			}
		}
	
		.tit {
			font-size: 20rpx;
		}
	
		.mix-icon {
			height: 48rpx;
			line-height: 48rpx;
			font-size: 38rpx;
			margin-bottom: 6rpx;
		}
	
		.number {
			position: absolute;
			right: 16rpx;
			top: 2rpx;
			min-width: 24rpx;
			height: 24rpx;
			padding: 0 8rpx;
			font-size: 16rpx;
			color: #fff;
			background-color: $base-color;
			border-radius: 100rpx;
		}
	}
	
	.btn-group {
		flex: 1;
		margin: 0 16rpx 0 14rpx;
		overflow: hidden;
	
		.btn {
			flex: 1;
			height: 76rpx;
			font-size: 30rpx;
			color: #fff;
			background-color: orange;
			border-radius: 100rpx 0 0 100rpx;
	
			&:last-child {
				background-color: $base-color;
				border-radius: 0 100rpx 100rpx 0;
			}
		}
	}
	
	.ysc {
		color: $base-color;
	}
	
	.logo-img{
		width: 20px;
		height: 20px;
	}
</style>
